<!--
 * @Descripttion: your project
 * @version: 1.0
 * @Author: hongweixun
 * @Date: 2022-05-31 08:24:47
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2023-02-13 09:23:43
-->
<!--  请假放行页面  -->
<template>
  <div class="index-flex-box" id="index-flex-box">
    <van-tabs
      v-model:active="active"
      sticky
      animated
      swipeable
      @change="tabsChanged"
      color="#146AF7"
      line-width="20px"
      line-height="4px"
      title-inactive-color="#999"
      title-active-color="#146af7"
    >
      <van-tab title="未考勤班级" name="1">
        <HomeOneTabs :active="1" ref="child1"></HomeOneTabs>
      </van-tab>
      <van-tab title="历史考勤" name="2">
        <HomeSecondTabs :active="2" ref="child2"></HomeSecondTabs>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick, onUnmounted } from 'vue'
import $util from '../util/util'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
import HomeOneTabs from '../components/HomeOneTabs.vue'
import HomeSecondTabs from '../components/HomeSecondTabs.vue'
import { Dialog, Toast } from 'vant'
const store = useStore()
const route = useRoute()
const router = useRouter()
const child2 = ref<any>(null)
const child1 = ref<any>(null)
// tabs选中的标签
const active = ref<any>('2')
const tabsChanged = (val: any) => {
  store.dispatch('setActive', val)
  if (Number(val) === 2) {
    if (child2.value.list.length === 0) {
      child2.value.dataChangeRef.getClassByRole()
    }
    child2.value.personQuery.page = 1
    child2.value.list = []
    child2.value.getHistory()
  } else {
    child1.value.oneRef.getClassByRole()
  }
}
onMounted(async () => {
  if (
    store.state.loginForm.id === undefined ||
    store.state.loginForm.id === null
  ) {
    store.dispatch(
      'setLoginForm',
      JSON.parse(window.sessionStorage.getItem('loginForm') as any)
    )
  }
  active.value = store.state.active
})
</script>
<style lang="scss" scoped>
.index-flex-box {
  position: relative;
  // overflow: hidden;
}
</style>
